<template>
  <!--政策通告-->
  <div class="container">
    <div class="header">
      <loginHeader
        :isShowType="isShowType"
        :activeIndex="activeIndex"
      ></loginHeader>
    </div>
    <div class="main">
      <div class="bannerbox">
        <div class="banner">
          <img src="../../../static/img/common/policyBanner.png" />
        </div>
        <div class="banner-title">
          <img src="../../../static/img/common/policyAnnunciate.png" />
        </div>
      </div>
      <div class="content">
        <div>
          <div style="height: 60px; line-height: 60px; font-size: 20px">
            <el-link :underline="false" @click="goBackList"
              >＜＜返回列表</el-link
            >
          </div>
          <h2 style="text-align: center">{{ policy.title }}</h2>
          <div
            style="
              text-align: center;
              height: 60px;
              line-height: 60px;
              background-color: #f5f7fb;
              margin-top: 50px;
              margin-bottom: 50px;
            "
          >
            发布时间:{{ policy.createTime }}&nbsp;&nbsp;来源:{{
              policy.remark || '--'
            }}&nbsp;&nbsp;发布人:{{ policy.author }}
          </div>
          <div style="min-height: 200px" v-html="policy.content"></div>
        </div>
      </div>
    </div>
    <loginFooter></loginFooter>
  </div>
</template>
<script>
import loginHeader from '@/components/publicCom/loginHeader'
import loginFooter from '@/components/publicCom/loginFooter'
export default {
  name: 'policyAnnunciateDetal',
  components: {
    loginHeader,
    loginFooter,
  },
  data() {
    return {
      isShowType: true,
      activeIndex: '1',
      policy: {},
      upPolicy: {},
      downPolicy: {},
      index: 0,
      currentPage: 1,
    }
  },
  created() {
    this.policy = this.$route.query.policy
  },
  methods: {
    changeContent: function (index) {
      var temp = this.list
      temp[index].showContent = !temp[index].showContent
      this.list = temp
    },
    goBackList() {
      this.$router.push('/common/policyAnnunciate')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/common/policyAnnunciate',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    onUp(page) {
      this.axios({
        method: 'post',
        url: 'api-m/help/detail',
        data: {
          pageNo: page,
          pageSize: 1,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.upPolicy = response.data.result.results[0]
              this.policy = response.data.result.results[0]
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    onNext(page) {
      this.axios({
        method: 'post',
        url: 'api-m/help/detail',
        data: {
          pageNo: page,
          pageSize: 1,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.downPolicy = response.data.result.results[0]
              this.policy = response.data.result.results[0]
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(
    left,
    #08205c 0%,
    #0f4d9a 10%,
    #0f4d9a 90%,
    #08205c 100%
  );
  height: 64px;
}
.bannerbox {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 348px;
}
.banner {
  width: 1920px; /*图片宽度*/
  position: absolute;
  left: 50%;
  margin-left: -960px; /*图片宽度的一半*/
}
.banner-title {
  width: 194px;
  position: absolute;
  left: 50%;
  margin-left: -97px;
  top: 50%;
  margin-top: -27px;
  z-index: 20;
}
.main {
  width: 100%;
  overflow: auto;
  top: 64px;
  position: absolute;
  z-index: 10;
  bottom: 94px;
}
.content {
  margin: 0 auto;
  width: 900px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 64px;
  line-height: 64px;
  background-color: #3e3e4a;
  text-align: center;
  color: #ffffff;
  margin-top: 50px;
  font-size: 14px;
}

.bg-purple {
  background: #009588;
}
.bg-purple-light {
  background: #f5f7fb;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
  line-height: 36px;
  color: #ffffff;
}
</style>
